﻿@*Search Page*@
@model HomeStayWebCP.Models.BusinessObject.SearchPostBO
@using HomeStayWebCP.Models
@using HomeStayWebCP.Utility;

@{
    ViewBag.Title = "Search";
    
    
}
<link href="../../Content/Styles/tooltipster.css" rel="stylesheet" type="text/css" />
<script src="../../Content/Paging/Pages.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.24.min.js" type="text/javascript"></script>
<link href="../../Content/Styles/button.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-ui-1.8.24.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.unobtrusive-0.5.4.js" type="text/javascript"></script>
<link href="../../Content/Styles/page.css" rel="stylesheet" type="text/css" />  
<link href="@Url.Content("../../Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />   
<link href="../../Content/Styles/checkboxstyle.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery.tooltipster.js" type="text/javascript"></script>
<script>
    $(window).load(function () {
        $.ajax({
            url: "/Search/SearchText",
            type: 'POST',
            success: function (response) {
                $("#resultbox").html(response);
            }
        });
        $('.slider-range div span:nth-child(2)').first().html('1- 500+');
        $('.slider-range div span:nth-child(2)').last().html('1- 200+');
       


    });
</script>
<script type="text/javascript">
     
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
   
    jQuery(document).ready(function () {
        jQuery(".content").show();
        jQuery(".heading").click(function () {
            jQuery(this).next(".content").slideToggle(500);
        });
    });
    $(function () {

        $("#ddlprovince").change(function (evt) {

            {

                var selectedProvince = $(this).val();
                //ngochtn
                
               // $.address.value($(this).val());
                var selectedDistrict = $("#ddldistrict").val();
                if (selectedProvince == '')
                    selectedProvince = -1;
                if (selectedProvince != null) {
                    $('.notify').css('display', 'none');
                    $.ajax({
                        url: "/Regions/GetDistrict",
                        type: 'POST',
                        asyn: false,
                        data: { province: selectedProvince },
                        success: function (response) {
                            $("#ddldistrict").replaceWith(response);

                        },
                        error: function (xhr) {
                            alert("Something went wrong, please try again");
                        }

                    });
                    $('input[value="Search"]').click(); //ngochtn

                } else {


                }
            }
        });
        $('#ddltypeofhouse').change(function (evt) {
            var selectedhousetype = $(this).val();
            //ngochtn
            //$.address.value($(this).val());
            if (selectedhousetype == 1) {
                $('#SearchHomestay').css("display", "block");


            } else {
                $('#SearchHomestay').css("display", "none");
                var checkboxes = document.getElementsByName("HomeStayTypeID");
                for (var i = 0; i < checkboxes.length; i++) {
                    // And stick the checked ones onto an array...
                    document.getElementsByName("HomeStayTypeID")[i].checked = false;
                }
            }

            $('input[value="Search"]').click(); //ngochtn
        });
        //checkbox onchange
        $(":checkbox").click(function () {
            $('input[value="Search"]').click(); //ngochtn
        });
        //slider onchange
        $('#slider').slider({
            change: function (event, ui) {

                $('input[value="Search"]').click();
            },
            stop: function (event, ui) {
                if (ui.values[1] == 501) {
                    $('.slider-range div span:nth-child(2)').first().html(ui.values[0] + '- 500+');
                }
                else {
                    $('.slider-range div span:nth-child(2)').first().html(ui.values[0] + '-' + ui.values[1]);
                }
            }
        });
        //Slider area
        $('#sliderArea').slider({
            change: function (event, ui) {
                $('input[value="Search"]').click();

            },
            stop: function (event, ui) {
                if (ui.values[1] == 201) {
                    $('.slider-range div span:nth-child(2)').last().html(ui.values[0] + '- 200+');
                } else {
                    $('.slider-range div span:nth-child(2)').last().html(ui.values[0] + '-' + ui.values[1]);
                }
            }
        });



    });
    function loadpages(page) {
        var url = "/Search/Paging";
        $.ajax({
            type: "Get",
            url: url,
            data: { id: page }, // them bien neu muon truyen them
            success: function (data) {
                $("#resultbox").html(data);
                //load();
            }
        });
    }

</script>
<style>
    *:focus {
    outline: none!important;
}
    .input-validation-error
{
    /*border: 1px solid red;*/
   
   
}
    li
    {
        list-style: none;
    }
    #sortbox
    {
        /*background-color: whiteSmoke;*/
        height: 50px;
        width: 1100px;
        margin: 0 auto;
    }
    #seachbox
    {
        width: 260px;
        height: 100%; /* background-color: white;*/
    }
    #searchbtn
    {
        position: absolute;
        top: 16px;
        right: 10px;
        z-index: 100;
    }
    #resultbox
    {
        width: 877px;
        height: auto;
        border-radius: 2px;
        margin-left: 260px;
    }
    .heading
    {
        margin: 1px;
        color: #fff;
        padding: 3px 10px;
        cursor: pointer;
        position: relative;
        background-color: gray;
        height: 22px;
        
    }
    .content
    {
        padding: 5px 10px; /*background-color: #fafafa;*/
    }
    p
    {
        padding: 5px 0;
    }
    .slider-range
    {
        margin: 13px 0 10px 9px;
        width: 188px;
        border: none !important;
        position: relative;
        text-align: left;
    }
    .provinceCombo
    {
        margin-top: 5px;
        margin-bottom: 5px;
    }
    .leftspace
    {
        /*margin: 0 10px;*/
        top: 10px;
        font-family: Tahoma;
        font-size: 12px;
        font-style: normal;
        font-weight: bold;
        letter-spacing: 0.1em;
        color: #0AE;
    }
    #results
    {
        overflow: hidden;
        margin: 0;
        list-style: none;
        padding: 5px;
    }
    .result
    {
        border-bottom: 1px solid #D8D8D8;
        padding: 10px 5px;
        position: relative;
        overflow: hidden;
        list-style: none;
        margin-bottom: 5px;
    }
    .result:hover {
        background-color: #EDF3D1;
    }
    .post_image_small
    {
        width: 122px;
        padding: 0 9px;
        float: left;
        position: relative;
    }
    .post_image_small a
    {
        padding: 3px;
        border-style: solid;
        border-width: 1px;
        border-color: #DDD #CACACA #ACACAC;
        line-height: 0;
        display: inline-block; /* background-color: white;*/
        position: relative;
        border-radius: 2px;
        box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.1),0 0 0 black;
        color: #1D95CB;
        text-decoration: none;
        list-style: none;
    }
    .post_image_small img
    {
        width: 114px;
        height: 74px;
    }
    .user_thumb
    {
        width: 36px;
        float: left;
        padding-right: 11px;
        padding-top: 4px;
        list-style: none;
    }
    .user_thumb a
    {
        display: inline-block;
        position: relative;
        z-index: 0;
        height: 36px;
    }
    .user_thumb img
    {
        width: 36px;
        height: 36px;
    }
    .post_title
    {
        line-height: 1.223em;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 550px;
    }
    .post_title a
    {
        text-decoration: none;
        color: #1D95CB;
    }
    .post_title a:visited
    {
        color: #551A8B;
    }
    .post_title a:hover
    {
        text-decoration: underline;
        color: hotpink;
    }
    .post_price
    {
        width: 150px;
        float: right;
        margin-top: -14px;
        margin-left: -25px;
        overflow: hidden;
        font-size: 13px;
        color: #5A5A5A;
    }
    .price
    {
        font-size: 27px;
        float: right;
        line-height: 30px;
        padding: 2px 10px 0 0;
    }
    .perdate
    {
        float: right;
        padding-right: 14px;
        text-align: right;
        width: 103px;
        color: royalBlue;
        margin-top: -5px;
        font-weight: bold;
    }
    .post_address
    {
        color: #848484;
        overflow: hidden;
    }
    .currencey
    {
        float: right;
    }
    .small.button
    {
        font-size: 14px;
    }
    .pink.button
     {
        background-color: yellowgreen;
    }
    .maplogo {
        background-image: url(../../Content/images/icons/google_maps_icon.png);
    }
    #container {
        background-color: white;
        min-height:1000px !important;
    }
    .notify {
        width: 240px;
        height: 20px;
        color: white;
        padding: 5px;
        margin-top: -5px;
        border-radius: 5px;
       
        
    }
</style>
<script type="text/javascript">
    function loading() {
        $("div#imageload").html('<img src="../../Content/images/icons/loading.gif" style="margin-left: 20px"/><p style="font-size: 18px;font-weight: bold;color: #1D95CB;">Loading....</p>');
    }
    function stoploading() {
        $("div#imageload").html('');
       
    }
</script>
<div class="rounded-corners" style="height: auto;background: #FAFAFA;">
    <div class="headdetail " style="margin-bottom: 0px">
        <div class="notify" id="notifycation"style="display: none;background-color: #C02141">
            <img src="../../content/images/icons/info.png" alt="" width="20px" height="20px" style="float: left;margin-right: 10px"/>
            <div>Please choose province first</div>
        </div>
    </div>
    @using (Ajax.BeginForm("Search", "Search", new AjaxOptions()
                                                   {
                                                       HttpMethod = "Post",
                                                       UpdateTargetId = "resultbox",
                                                       OnBegin = "loading",
                                                       OnSuccess="stoploading"



                                                   }, new { id = "form" }))
    {
        @Html.ValidationSummary(true)
        <div id="seachbox" style="border: 1px solid #C3C3C3;float: left;border-radius: 2px;">
       <p class="heading">Region</p>
            <div class="content" id="contentregion">
                <span class="leftspace">Province/City </span>      
                <div class="provinceCombo" id="province" >
                    @Html.DropDownListFor(m => m.ProvinceID, (IEnumerable<SelectListItem>)ViewBag.Province, "Select-Province", new {id="ddlprovince", style = "width:140px"})
                </div>
            
                <span class="leftspace">District </span>   
                @{
                    <div class="provinceCombo" id="districtdiv">
                     @if (Model.ProvinceID != 0)
                    {
                        
                            @Html.DropDownListFor(m => m.DistrictID, (IEnumerable<SelectListItem>)ViewBag.District, new { id = "ddldistrict", style = "width:140px" })
                        
                    }
                    else
                    {
                        
                            <select id="ddldistrict" name="ddldistrict" style="width: 140px">
                                <option value="-1">Select-District</option>
                            </select>
                        
  
                        }
                   </div>
                }    
            

            </div>
            <p class="heading">Type Of House </p>
            <div class="content">
                <div class="provinceCombo" id="ddltypeofhomestay">
                        
                    @Html.DropDownListFor(m => m.Housetype, (IEnumerable<SelectListItem>)ViewBag.TypeofHouse, "Select-Type", new { id = "ddltypeofhouse", style = "width:140px" })
                           
                </div>

            </div>
            <div id="SearchHomestay" style="display: none">
                <p class="heading">Homestay Types</p>
                <div class="content">
                    @foreach (var item in (IEnumerable<SelectListItem>)ViewBag.HomeStayTypeID)
                    {
                        var image = item.Value + ".jpg";
                        <div class="tooltip" style="margin-left: 50px" title="<img src='../../Content/images/icons/@image' width='100' height='100' ">sss</div>
                        <div style="width: 100px" >
                            <div class="custom-checkbox" >
                                
                                
                                <input type="checkbox" id="@item.Value" value="@item.Value" name="HomeStayTypeID">
                                
                                <label for="@item.Value"><span class="box"></span>@item.Text</label>
                           
                            </div>
                          
                        </div>
                         
                    }
                    
                </div>
            </div>
         

            <p class="heading">Price</p>
            <div class="content">
                <div class="slider-range" style="width: auto;display: none" id="priceslider">
                    @Html.JQueryUI().SliderFor(new { id = "slider" }, m => m.MinPrice, m => m.MaxPrice).Range(SliderRange.Between).Max(501).Min(1)
                    <div class="currencey">USD</div>
                </div>
              
                <div >
                    @Html.DropDownListFor(m => m.Pricetype, (IEnumerable<SelectListItem>)ViewBag.pricetypes, new { id = "ddlpricetype", style = "width:140px" })
                 
                </div>
            </div>
    
            <p class="heading">Area</p>
            <div class="content">
                <div class="slider-range" style="width: auto">
                 @Html.JQueryUI().SliderFor(new { id = "sliderArea" }, m => m.MinArea, m => m.MaxArea).Range(SliderRange.Between).Max(201).Min(1)
                    <div class="currencey">m2</div>
                </div>
            </div>
        
            <p class="heading">More Information</p>
            <div class="content">
           
                <div class="custom-checkbox">
           
                    <input type="checkbox" id="House.HasGara" value="true" name="HasGara">
                    <label for="House.HasGara"><span class="box"></span>Has Gara</label>
                </div>
                <div class="custom-checkbox">
                   
                    <input type="checkbox" id="House.HasGarden" value="true" name="HasGarden">
                    <label for="House.HasGarden"><span class="box"></span>Has Garden</label>
                </div>
                <div class="custom-checkbox">
                 <input type="checkbox" id="House.HasKitchen" value="true" name="HasKitchen">
                    <label for="House.HasKitchen"><span class="box"></span>Has Kitchen</label>
                </div>
      
            </div>
            <p class="heading">View On Map</p>
         
            <div class="content" id="mapgoogle">
                @Ajax.ImageActionLink("../../Content/images/icons/google_maps_icon.png", "", "ViewMap", "Houses", new { idmap = "mapID" }, new AjaxOptions() { UpdateTargetId = "resultbox", HttpMethod = "Get" }, new { id = "vMap" })
        
                
            </div>

        </div>
        <div id="searchbtn" style="display: none">
            <input class="small pink button " style="width: 125px; height: 45px;font-size: 15px;" value="Search" type="submit"/>
        </div>

                    if (ViewBag.InitPage == "first")
                    {
                <div id="resultbox">
                    @{Html.RenderAction("SelectTopNew", "Search");}
                </div>
                <script type="text/javascript">
                    $(function() {
                        $('#topnewest').css('display', 'block');
                    });

                    jQuery(document).ready(function () {
                        jQuery(".content").hide();
                        jQuery("#contentregion").show();
                    });
                </script>
        
                    }
                    else
                    {
            <div id="resultbox">
            </div>
                    }
            
        
        
        <div id="imageload" style="position: absolute;top: 300px;left: 600px;">
        
        </div>
    }


</div>
@{
    if (ViewBag.Homepagepass != null)
    {
        <script type="text/javascript">
            $(function () {
                $('input[value="Search"]').click();
            })
        </script>
    }
}
<div class="provinceCombo" style="position:absolute;top:0px;left:260px">
    <select id="ddlprice" style="width: 200px;float:left;display: none">
        <option value="-1">Sort by Price</option>
        <option value="0">From Low to Hight</option>
        <option value="1">From Hight to Low</option>
    </select>
    <div class="notify" id="topnewest"style="width: 200px;margin-top: 2px;margin-left: 5px;display:none;">
        <p style="margin-top: -5px;font-weight: bold;color: #1970CE">TOP NEWEST POST</p>
        
</div>
</div>

<script type="text/javascript">
    $(function () {
        $('#ddlprice').change(function (evt) {
            var selectedlow = $(this).val();
            //alert(selectedlow);
            sortprice(selectedlow);
        });
        $('#ddlpricetype').change(function (evt) {
            var selectedtype = $(this).val();
            if (selectedtype == '-1') {
                $('#priceslider').css('display', 'none');
                $('#ddlprice').css('display', 'none');

            } else {
                $('#ddlprice').css('display', 'block');
                $('#priceslider').css('display', 'block');
            }
            $('input[value="Search"]').click();
        });
        $('#ddlprovince').focus(function () {
            if ($(this).val() == '') {
                $('#notifycation').css('display', 'block');
                $('#notifycation').focus();
            }

        });
    });
    function sortprice(low) {
        var count = $('#results li').length;
        var array = [];
        for (var i = 0; i < count; i++) {
            var price=parseInt(document.getElementsByTagName("li")[i].getAttribute("id"));
            array[i] = price;
        }
        if (low > -1) {
            array.sort(function (a, b) {
                return a - b;
            });
            if (low == 1) {
                array.reverse();
            }
        }
        var listli = $('#results li').get();
        $('#results').html("");
        for (var j in array) {
            $.each(listli, function (i, v) {

                if (array[j] == this.getAttribute("id")) {
                    $('#results').append(this);
                }

            });
        }

    }
    //When ajax.actionlink with id = vMap clicked
    $("#vMap").click(function () {
        if ($('#ddlprovince').val() == '') {
            $('#notifycation').css('display', 'block');

        } else {
            $('#notifycation').css('display', 'none');
            //Get value selected from dropdownlist
            var provincemap = $("#form").find("#ddlprovince").val();
            //this.href = this.href.replace("mapID", provincemap);
            $(this).attr('href', "/Houses/ViewMap/" + provincemap);
  
        }
        
    });
   
</script>